<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <p>{{count}}</p>
            <p>
                <button @click="count++">点击</button>
            </p>
        </div>
        <div>
            <button @click="sortList">点击排序</button>
            <button @click="addEleToList">点击新增</button>
        </div>
        <ul>
            <li v-for="item,index in list" :key="index">
                {{item}}
            </li>
        </ul>

        <!-- 从数组中筛选出所有的偶数  => 展示偶数数组 -->
        <!-- <div>获取偶数集合: {{list.filter(v=>v % 2 == 0)}}</div> -->

        <!-- 函数版写法 => 用法上没有问题,但是性能上不是很友好  => 每次视图更新, 都会调用getOu() 方法 -> 视图上使用n次就会被调用n次  -->
        <!-- <div>获取偶数集合: {{getOu()}}</div>
        <div>获取偶数集合: {{getOu()}}</div>
        <div>获取偶数集合: {{getOu()}}</div>
        <div>获取偶数集合: {{getOu()}}</div>
        <div>获取偶数集合: {{getOu()}}</div>
        <div>获取偶数集合: {{getOu()}}</div> -->
        
        <!-- 计算属性 -->
        <div>获取偶数集合: {{getEven}}</div>
        <div>获取偶数集合: {{getEven}}</div>
        <div>获取偶数集合: {{getEven}}</div>
        <div>获取偶数集合: {{getEven}}</div>
        <div>获取偶数集合: {{getEven}}</div>
        <div>获取偶数集合: {{getEven}}</div>
    </div>
</body>
<script>
    // methods 用于存放方法 
    // 1. 每次对应名称调用函数,函数都会执行一次 (在一个视图中,如果同一个方法多次使用->调用多次)
    // 2. 数据更新之后, 为了对比数据更细前后虚拟DOM的变化 => 函数还要在执行一次

    // computed 计算属性 (派生值 衍生值)
    // computed 计算属性 => 是根据data中绑定的数据(一个或多个)得到的一个新数据(派生值 衍生值),计算属性可以依赖data中的一个或多个数据, 并在data绑定完毕之后默认执行一次对应的函数,将函数的执行结果作为计算属性的属性值,并缓存计算的结果,当该计算属性依赖的数据(data中绑定的)发生改变值,绑定的函数才会重新执行,并缓存新的结果
    // 注意:  不建议在计算属性中使用异步代码 (不能执行异步操作)

    // 简单小结: 根据原本的数据得到新数据, 新数据依赖原本的数据, 如果被依赖的数据发生改变, 新数据也会改变,并缓存计算的结果


    // 你(公司的老板) <= 员工A + 员工B  + 员工C  + 员工D

    // 小计(total 新) = 商品价格(price) * 商品数量(num)
    //                        99               1    
    //                        120-10
    //                                         2

    var vm = new Vue({
        el: "#app",
        data: {
            count:1,
            list: [1, 4, 7, 2, 5, 8, 3, 6, 9],
        },
        methods: {
            sortList() {
                this.list.sort((a, b) => a - b);
            },
            addEleToList() {
                var num = Math.round(Math.random() * 100);  //随机数值
                var index = Math.floor(Math.random() * this.list.length); // 随机下标
                this.list.splice(index, 0, num);
            },
            getOu: function () {
                console.log("getOu被调用");
                return this.list.filter(v => v % 2 == 0);
            }
        },
        computed:{  // computed 计算属性 
            // 键名: 计算属性的属性名 (如果需要使用此计算属性 通过vue实例获取)
            // 键值: 依赖于函数的执行结果 (计算属性 绑定的函数会在data数据绑定完毕之后默认执行一次,并将函数的执行结果作为计算属性的值 => 函数中的this默认执行当前Vue实例)
            getEven:function(){
                console.log("getEven被调用");
                return this.list.filter(v => v % 2 == 0);
            }
        }
    })


    // console.log(vm);






</script>

</html>